<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客封面生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>📸 博客封面生成器</h1>
            <p class="subtitle">轻松创建专业的博客文章封面</p>
        </header>

        <div class="main-content">
            <!-- 模式切换 -->
            <div class="mode-selector">
                <button class="mode-btn active" data-mode="custom">自定义模式</button>
                <button class="mode-btn" data-mode="template">模板模式</button>
            </div>

            <!-- 控制面板 -->
            <div class="control-panel">
                <!-- 自定义模式控制 -->
                <div class="mode-controls" id="custom-controls">
                    <div class="control-group">
                        <label>📷 上传背景图</label>
                        <input type="file" id="bgImageInput" accept="image/*">
                    </div>

                    <div class="control-group">
                        <label>📐 图片比例</label>
                        <select id="aspectRatio">
                            <option value="16:9">16:9 (常用)</option>
                            <option value="4:3">4:3</option>
                            <option value="3:2">3:2</option>
                            <option value="1:1">1:1 (方形)</option>
                            <option value="21:9">21:9 (超宽)</option>
                        </select>
                    </div>

                    <div class="control-group">
                        <label>📝 标题文字</label>
                        <input type="text" id="titleText" placeholder="输入文章标题" maxlength="50">
                    </div>

                    <div class="control-group">
                        <label>📄 副标题</label>
                        <input type="text" id="subtitleText" placeholder="输入副标题（可选）" maxlength="100">
                    </div>

                    <div class="control-group">
                        <label>🎨 文字颜色</label>
                        <input type="color" id="textColor" value="#ffffff">
                    </div>

                    <div class="control-group">
                        <label>📏 标题大小</label>
                        <input type="range" id="titleSize" min="20" max="80" value="48">
                        <span id="titleSizeValue">48px</span>
                    </div>

                    <div class="control-group">
                        <label>📏 副标题大小</label>
                        <input type="range" id="subtitleSize" min="12" max="50" value="24">
                        <span id="subtitleSizeValue">24px</span>
                    </div>

                    <div class="control-group">
                        <label>✨ 文字样式</label>
                        <div style="display: flex; gap: 15px; margin-top: 5px;">
                            <label style="display: flex; align-items: center; gap: 5px; font-weight: normal;">
                                <input type="checkbox" id="titleBold">
                                <span>粗体</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 5px; font-weight: normal;">
                                <input type="checkbox" id="titleItalic">
                                <span>斜体</span>
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>� 字体</label>
                        <select id="fontFamily">
                            <option value="Arial, sans-serif">Arial</option>
                            <option value="'Microsoft YaHei', sans-serif">微软雅黑</option>
                            <option value="'SimHei', sans-serif">黑体</option>
                            <option value="'KaiTi', serif">楷体</option>
                            <option value="Georgia, serif">Georgia</option>
                            <option value="'Courier New', monospace">Courier New</option>
                        </select>
                    </div>

                    <div class="control-group">
                        <label>🌓 遮罩透明度</label>
                        <input type="range" id="overlayOpacity" min="0" max="100" value="40">
                        <span id="overlayOpacityValue">40%</span>
                    </div>

                    <div class="control-group">
                        <label>📍 文字位置</label>
                        <select id="textPosition">
                            <option value="center">居中</option>
                            <option value="top">顶部</option>
                            <option value="bottom">底部</option>
                            <option value="left">左侧</option>
                            <option value="right">右侧</option>
                        </select>
                    </div>
                </div>

                <!-- 模板模式控制 -->
                <div class="mode-controls hidden" id="template-controls">
                    <div class="control-group">
                        <label>🎨 选择模板</label>
                        <div class="template-grid">
                            <div class="template-item" data-template="gradient1">
                                <div class="template-preview gradient1"></div>
                                <span>渐变紫</span>
                            </div>
                            <div class="template-item" data-template="gradient2">
                                <div class="template-preview gradient2"></div>
                                <span>渐变蓝</span>
                            </div>
                            <div class="template-item" data-template="gradient3">
                                <div class="template-preview gradient3"></div>
                                <span>渐变橙</span>
                            </div>
                            <div class="template-item" data-template="tech">
                                <div class="template-preview tech"></div>
                                <span>科技风</span>
                            </div>
                            <div class="template-item" data-template="minimal">
                                <div class="template-preview minimal"></div>
                                <span>极简风</span>
                            </div>
                            <div class="template-item" data-template="nature">
                                <div class="template-preview nature"></div>
                                <span>自然风</span>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>📐 图片比例</label>
                        <select id="templateAspectRatio">
                            <option value="16:9">16:9 (常用)</option>
                            <option value="4:3">4:3</option>
                            <option value="3:2">3:2</option>
                            <option value="1:1">1:1 (方形)</option>
                            <option value="21:9">21:9 (超宽)</option>
                        </select>
                    </div>

                    <div class="control-group">
                        <label>📝 标题文字</label>
                        <input type="text" id="templateTitleText" placeholder="输入文章标题" maxlength="50">
                    </div>

                    <div class="control-group">
                        <label>📄 副标题</label>
                        <input type="text" id="templateSubtitleText" placeholder="输入副标题（可选）" maxlength="100">
                    </div>

                    <div class="control-group">
                        <label>📏 标题大小</label>
                        <input type="range" id="templateTitleSize" min="20" max="80" value="48">
                        <span id="templateTitleSizeValue">48px</span>
                    </div>

                    <div class="control-group">
                        <label>📏 副标题大小</label>
                        <input type="range" id="templateSubtitleSize" min="12" max="50" value="24">
                        <span id="templateSubtitleSizeValue">24px</span>
                    </div>

                    <div class="control-group">
                        <label>✨ 文字样式</label>
                        <div style="display: flex; gap: 15px; margin-top: 5px;">
                            <label style="display: flex; align-items: center; gap: 5px; font-weight: normal;">
                                <input type="checkbox" id="templateTitleBold" checked>
                                <span>粗体</span>
                            </label>
                            <label style="display: flex; align-items: center; gap: 5px; font-weight: normal;">
                                <input type="checkbox" id="templateTitleItalic">
                                <span>斜体</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button id="downloadBtn" class="btn-primary">⬇️ 下载封面</button>
                    <button id="resetBtn" class="btn-secondary">🔄 重置</button>
                </div>
            </div>

            <!-- 预览区域 -->
            <div class="preview-panel">
                <h3>预览</h3>
                <div class="canvas-container">
                    <canvas id="coverCanvas"></canvas>
                </div>
                <p class="preview-info">实时预览你的封面效果</p>
            </div>
        </div>

        <footer>
            <p>💡 提示：使用高质量图片效果更佳 | 推荐尺寸：1200x630px</p>
        </footer>
    </div>

    <script src="app.js"></script>
</body>
</html>